<template>
  <div @click="relatedShowFun">
    <RHeader />
    <div :class="{ 'top-area': true, pad_bottom: btnTF }">
      <Search
        :keyValue="keyValue"
        @getResults="getResults"
        @getActiveBTNFun="getActiveBTNFun"
        :backTF="backTF"
        ref="searchRef"
      ></Search>
      <!-- <div class="results-tabs flex-between">
        <div class="tabs-wrap flex-center-start">
          <div
            class="tab flex-center"
            @mouseover="chooseId = null"
            @mouseleave="chooseId = oldChooseId"
            :class="[index === chooseId ? 'active' : '']"
            v-for="(item, index) in tabsBTN"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div class="data-select"></div>
      </div> -->
    </div>
    <div class="news-area flex-center">
      <div class="left">
        <div
          :class="classRMFun(item.flag)"
          @click="goDetail(item)"
          v-for="(item, index) in newsMain"
          :key="index"
        >
          <!-- 图片-标签 -->
          <div
            class="circle_icon"
            :style="{
              backgroundColor: flagStyleFun(item.flag, 'bg'),
            }"
          >
            <span>
              {{ flagStyleFun(item.flag) }}
            </span>
          </div>
          <div class="top flex-center-start">
            <!-- 人物照片 v-show="item.logo" -->
            <div class="logo">
              <img :src="item.logo" alt="" srcset="" />
            </div>
            <div class="content">
              <!-- 人名 -->
              <div class="title">{{ item.name }}</div>
              <div class="tags">
                <div
                  class="tag flex-center"
                  v-for="(son, indexTag) in item.tags"
                  :key="indexTag"
                  :style="{
                    color: son.type == 1 ? 'red' : son.type == 2 ? 'pink' : '',
                  }"
                >
                  {{ son.value }}
                </div>
              </div>
            </div>
          </div>
          <div class="bot flex-center-start">
            <div
              class="text flex-center-start"
              v-for="(sub, indexParams) in item.params"
              :key="indexParams"
            >
              <div class="tit one-line-ellipsis">{{ sub.key }}:</div>
              <div class="desc">{{ sub.value }}</div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <!-- 分页器： -->
        <!-- 全功能： layout="total, sizes, prev, pager, next, jumper" -->
        <div class="page_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="aTPageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <!-- <div class="news-list" v-for="(item, index) in newsList" :key="index">
          <div class="title">{{ item.name }}</div>
          <div class="mid flex-center-start">
            <div
              class="logo"
              :style="{ backgroundImage: `url(${item.logo})` }"
            ></div>
            <div class="content">
              <div class="tags">
                <div
                  class="tag flex-center"
                  v-for="(itemTag, indexTag) in item.tags"
                  :key="indexTag"
                  :style="{
                    color:
                      itemTag.type == '1'
                        ? 'red'
                        : itemTag.type == '2'
                        ? 'pink'
                        : '',
                  }"
                >
                  {{ itemTag.value }}
                </div>
              </div>
              <div class="desc two-line-ellipsis">{{ item.description }}</div>
            </div>
          </div>
          <div class="from">
            <span>来自于</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="link">{{ item.link }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp; <span class="time">{{ item.time }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div class="bot flex-center-start">
            <div class="son flex-center">
              <div class="icon icon1"></div>
              <div class="num">{{ item.starNum }}</div>
            </div>
            <div class="line"></div>
            <div class="son flex-center">
              <div class="icon icon2"></div>
              <div class="num">{{ item.supportNum }}</div>
            </div>
            <div class="line"></div>
            <div class="son flex-center">
              <div class="icon icon3"></div>
              <div class="num">{{ item.commentNum }}</div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="right">
        <div class="wrap">
          <div class="title">{{ relationTitle }}</div>
          <div class="subs">
            <div
              class="sub flex-center-column"
              @click="goDetail(item, true)"
              v-for="(item, index) in relationList"
              :key="index"
            >
              <div
                class="relationImg"
                :style="{ backgroundImage: `url(${item.instanceImage})` }"
              ></div>
              <div class="text">
                <span>{{ item.instanceName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RHeader from "@/components/resultHeader";
import Search from "@/components/search";
import { parse } from "path-to-regexp";
export default {
  components: {
    RHeader,
    Search,
  },
  data() {
    return {
      backTF: true, //返回
      keyValue: "",
      oldChooseId: 0, //  缓存旧的选择中状态
      chooseId: 0,
      tabsBTN: ["全部", "动态数据", "内部数据"],
      // 选中切换：
      activeBTN: "全部",
      newsList: [],
      newsMainPage: [], //分页好的
      newsMain: [], //只显示对应的数据.
      newsMainMax: [],
      newsMainPageArr: [], // 分页 Arr
      // 分页
      pageSizes: [10, 50, 100], //分页选项(已隐藏)
      aTPageSize: 10, //默认选中的每页几个,
      total: 0,
      currentPage: 1, // 当前首页
      // newsMain  : [
      //     {
      //       logo: require("@/assets/common/u55.png"),
      //       // logo: "@/assets/common/u55.png",
      //       name: "B-1B",
      //       tags: [
      //         {
      //           value: "标签1",
      //           type: "1",
      //         },
      //         {
      //           value: "标签2",
      //           type: "2",
      //         },
      //       ],
      //       params: [
      //         {
      //           key: "首飞时间",
      //           value: "1986年9月28日",
      //         },
      //         {
      //           key: "气动布局",
      //           value: "变后惊翼",
      //         },
      //         {
      //           key: "首飞时间",
      //           value: "1986年9月28日",
      //         },
      //         {
      //           key: "气动布局",
      //           value: "变后惊翼",
      //         },
      //         {
      //           key: "首飞时间",
      //           value: "1986年9月28日",
      //         },
      //         {
      //           key: "气动布局",
      //           value: "变后惊翼",
      //         },
      //         {
      //           key: "首飞时间",
      //           value: "1986年9月28日",
      //         },
      //         {
      //           key: "气动布局",
      //           value: "变后惊翼",
      //         },
      //       ],
      //     },
      //   ],
      newsList: [],
      // newsList: [
      //   {
      //     logo: require("@/assets/common/u55.png"),
      //     name: "B-1B",
      //     tags: [
      //       {
      //         value: "标签1",
      //         type: "1",
      //       },
      //       {
      //         value: "标签2",
      //         type: "2",
      //       },
      //     ],
      //     description:
      //       "【什么意图？台媒称美军两架B-1B战略轰炸机今现踪台湾东南海域，台军回应了】综合台媒与记录军事飞行器动态的社群媒体“飞机守望”（AircraftSpots）消息，美国空军两架B-1B枪骑兵战略轰炸机朝台湾东南海域方向飞行，并由空中加油机补给油料。台媒提到，",
      //     link: "环球网",
      //     time: "2020-10-01 18:00",
      //     starNum: "342",
      //     supportNum: "342",
      //     commentNum: "342",
      //   },
      // ],
      relationTitle: "相关推荐", //  相关人物，武器标题
      relationList: [
        // {
        //   instanceImage: require("@/assets/common/u55.png"),
        //   instanceName: "B-1B",
        // },
        // {
        //   instanceImage: require("@/assets/common/u55.png"),
        //   instanceName: "B-1B",
        // },
      ],
    };
  },
  mounted() {
    // console.log("路径", window.location.href, "yyyy", window.location.host);
    this.keyValue = this.$route.params.keyValue;
    // console.log("111111", this.keyValue);
    if (this.keyValue) {
      localStorage.inputValue = this.keyValue;
      this.getResults(this.keyValue);
      sessionStorage.showTF = "1";
    } else {
      if (localStorage.inputValue) {
        this.keyValue = localStorage.inputValue;
        this.getResults(localStorage.inputValue);
        sessionStorage.showTF = "1";
      }
    }
  },
  created() {
    // axios 前缀存储
    this.$api.axiosUrlset();
  },
  // updated() {
  //     this.keyValue = this.$route.params.keyValue;
  //   this.getResults(this.keyValue);
  // },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页11111111: ${val}`);
      this.currentPage = val;
      // 页面保存
      sessionStorage.currentPage = val + "";
      // 当前页
      this.newsMain = this.newsMainPageArr[val - 1];
    },
    classRMFun(type) {
      let c = ["results-main"];
      if (type > 6) {
        c.push("main_box");
      }
      return c;
    },
    //分页Fun： 数组，每页个数：num
    pageFun(arr, num = 10) {
      let a = [];
      arr.forEach((item, idx) => {
        let i = Math.floor(idx / num);
        if (!a[i]) {
          a[i] = [];
        }
        a[i].push(item);
      });
      return a;
    },
    //
    getActiveBTNFun(btn = 0, pageNum = 1) {
      // console.log("哒哒哒", btn);
      this.currentPage = pageNum;
      //保存
      sessionStorage.currentPage = pageNum + "";
      let aArr = this.resFun(this.newsMainMaxFun(btn));
      this.total = aArr.length;
      this.newsMainPageArr = this.pageFun(aArr);
      // 当前页
      this.newsMain = this.newsMainPageArr[this.currentPage - 1];
    },
    newsMainMaxFun(type) {
      // 全部
      if (type == 0) {
        let t = JSON.parse(JSON.stringify(this.newsMainMax));
        return t;
      }
      let a = [];
      this.newsMainMax.forEach((item) => {
        if (type == 7 || type == 8) {
          // 社交媒体，网站
          if (item.flag == type) {
            a.push(item);
          }
        } else if (type == 6) {
          // 百科
          if (item.flag <= type) {
            a.push(item);
          }
        }
      });
      return a;
    },
    relatedShowFun() {
      // console.log("出发了！");
      this.$refs.searchRef.relatedShowFun();
    },
    // 1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件
    flagStyleFun(num, type = "text") {
      let str = +"";
      let text = "";
      let bgColor = "";
      // let fontColor = "#FFFFFF";
      let colors = [
        "#20c17c",
        "#E3A708",
        "#f93f5e",
        "#8780ff",
        "#3F4FF9",
        "#AECCFB",
        "#81D3F8",
        "#E8C0CB",
      ];
      switch (num) {
        case "1":
          text = "人物";
          break;
        case "2":
          text = "组织";
          break;
        case "3":
          text = "武器";
          break;
        case "4":
          text = "设施";
          break;
        case "5":
          text = "部队";
          break;
        case "6":
          text = "事件";
          break;
        case "7":
          text = "社交";
          break;
        case "8":
          text = "网站";
          break;
        default:
          break;
      }
      bgColor = colors[num - 1];
      // console.log(bgColor);
      if (type == "text") {
        return text;
      } else {
        return bgColor;
      }
    },
    getResults(value) {
      localStorage.inputValue = value;
      // 正则匹配,替换：
      let reg = new RegExp("/", "g");
      let v = value.replace(reg, "$");
      // console.log("vvvvvvvvvvvvvv", v);
      // 搜索的东西
      this.$api.getResults(v).then((res) => {
        // 1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件
        // console.log("1111111:", value, res);
        this.newsMainMax = res;
        // 有缓存执行
        let pageNum = 1;
        if (sessionStorage.currentPage) {
          pageNum = parseInt(sessionStorage.currentPage);
        }
        if (sessionStorage.btnNum) {
          this.getActiveBTNFun(sessionStorage.btnNum, pageNum);
        } else {
          // 所有：
          this.getActiveBTNFun(0, pageNum);
        }
      });
      // 相关推荐的东西
      this.$api.getLinkInfo(v).then((res) => {
        // console.log("相关推荐的", res);
        this.relationList = res;
      });
    },
    // 除第一个默认后，需要有图片的排序在前：
    resFun(res) {
      let yes = [];
      let no = [];
      res.forEach((item, idx) => {
        // 第一个不管有图片与否，都追加到有图片排序上
        if (idx == 0) {
          yes.push(item);
        } else {
          if (item.logo) {
            yes.push(item);
          } else {
            no.push(item);
          }
        }
      });
      // 最后合并：
      let arr = [...yes, ...no];
      return arr;
    },
    goDetail(item, tf = false) {
      // alert(item.flag);
      // console.log("这是什么值", item);
      // 存储类型：
      localStorage.flag = `${item.flag}`;
      // 这里是1-6的路径：(百科路径)
      if (item.flag < 7) {
        if (tf) {
          // 相关推荐：
          this.keyValue = item.instanceName;
          localStorage.inputValue = this.keyValue;
          this.$router.push({
            name: "mainDetail",
            params: {
              flag: item.flag,
              id: item.instanceId,
              name: item.instanceName,
              keyValue: this.keyValue,
            },
          });
        } else {
          // 正常的点击跳转：
          this.$router.push({
            name: "mainDetail",
            params: {
              flag: item.flag,
              id: item.id,
              name: item.name,
              keyValue: this.keyValue,
            },
          });
        }
      }
      // 这里是7的路径：（社交媒体）
      if (item.flag == 7) {
        localStorage.whereGo = "index";
        this.$router.push({
          path: `/mainDetail/mtDetail/${item.id}`,
        });
      }
      // 这里是8的路径：（网站）
      if (item.flag == 8) {
        localStorage.whereGo = "tendency";
        // 来源：
        item.params.forEach((t) => {
          if (t.key == "来源") {
            sessionStorage.dataSource = t.value;
          }
        });
        this.$router.push({
          path: `/mainDetail/mtDetail/${item.id}`,
        });
      }
    },
  },
  computed: {
    btnTF() {
      if (this.$route.path == "/results") {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top-area {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0.063) 0px 0px 10px;
}
.pad_bottom {
  padding-bottom: 0rem;
}
.results-tabs {
  margin: 0 auto;
  width: 9.6rem;
  //   padding: 0 20px;
  padding-top: 10px;
  .tab {
    position: relative;
    padding: 0 0.2rem;
    height: 0.4rem;
    font-size: 0.14rem;
    color: rgba(0, 0, 0, 0.6);
    &.active {
      color: rgb(45, 115, 255);
      &::after {
        width: 100%;
        position: absolute;
        content: "";
        height: 2px;
        background: rgb(45, 115, 255);
        bottom: 0;
      }
    }
    &::after {
      width: 0;
      position: absolute;
      content: "";
      height: 2px;
      background: rgb(45, 115, 255);
      bottom: 0;
    }
    &:hover {
      color: rgb(45, 115, 255);
      &::after {
        width: 100%;
        transition: width 0.3s;
      }
    }
  }
}
.news-area {
  line-height: 1;
  margin-top: 0.2rem;
  margin-bottom: 20px;
  font-size: 0.14rem;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.8);
  .logo {
    margin-right: 0.2rem;
    // width: 160px;
    height: 100px;
    img {
      // width: 100%;
      height: 100%;
    }
  }
  .content {
    min-height: 70px;
    overflow: hidden;
    .title {
      margin-bottom: 0.1rem;
      font-weight: 650;
      font-style: normal;
      font-size: 0.24rem;
      letter-spacing: 1px;
      color: rgba(0, 0, 0, 0.847);
    }
    .tag {
      margin-right: 0.1rem;
      display: inline-block;
      padding: 0.06rem 0.2rem;
      border-radius: 0.06rem;
      background-color: #c3d7ff;
      color: #2d73ff;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 0.1rem;
    }
  }

  .left {
    align-self: flex-start;
    width: 11.75rem;
    margin-right: 0.2rem;
    .results-main {
      position: relative;
      padding: 0.3rem 0.2rem 0.2rem 0.2rem;
      width: 100%;
      // height: 264px;
      background-color: rgb(255, 255, 255);
      border: none;
      border-radius: 0.08rem;
      box-shadow: rgba(0, 0, 0, 0.063) 0px 0px 10px;
      cursor: pointer;
      // margin: 10px 0;
      .circle_icon {
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        // background: red;
        top: 20px;
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 12px;
      }
      .top {
        margin-bottom: 0.3rem;
      }
      .bot {
        width: 7.2rem;
        flex-wrap: wrap;
        .text {
          width: 3.6rem;
        }
        .tit {
          padding: 0.08rem 0.1rem;
          min-width: 1rem;
        }
        .desc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .results-main + .results-main {
      margin-top: 10px;
    }
    .main_box {
      // background: red;
      .content {
        min-height: 0px;
      }
      .logo {
        height: auto;
      }
    }
    .news-list {
      margin-top: 0.2rem;
      padding: 0.3rem 0.2rem 0.2rem 0.2rem;
      width: 100%;
      background-color: rgb(255, 255, 255);
      border: none;
      border-radius: 0.08rem;
      box-shadow: rgba(0, 0, 0, 0.063) 0px 0px 10px;
      .desc {
        margin-top: 0.1rem;
        overflow: hidden;
        width: 8.46rem;
        height: 44px;
        color: rgba(0, 0, 0, 0.647);
        line-height: 22px;
      }
      .from {
        margin-top: 0.3rem;
        color: rgba(0, 0, 0, 0.44);
        font-weight: 400;
        .link {
          color: #108ee9;
        }
        .time {
          color: rgba(0, 0, 0, 0.247);
        }
      }
      .bot {
        margin-top: 0.2rem;
        .son {
          margin: 0 0.1rem;
        }
        .line {
          margin: 0 0.1rem;
          width: 1px;
          height: 0.22rem;
          background: rgb(233, 233, 233);
        }
        .icon {
          margin-right: 0.06rem;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width: 0.14rem;
          height: 0.15rem;
          &.icon1 {
            background-image: url(~@/assets/common/icon-shoucang.png);
          }
          &.icon2 {
            background-image: url(~@/assets/common/icon-dz.png);
          }
          &.icon3 {
            background-image: url(~@/assets/common/icon-pl.png);
          }
        }
      }
    }
  }
  .right {
    width: 4.84rem;
    align-self: flex-start;
    .wrap {
      margin-bottom: 0.2rem;
      width: 100%;
      // padding: 0.2rem 0.2rem 0.2rem 0.3rem;
      padding: 0.2rem;
      background-color: rgb(255, 255, 255);
      border: none;
      border-radius: 0.08rem;
      box-shadow: rgba(0, 0, 0, 0.063) 0px 0px 10px;
    }
    .title {
      font-weight: 650;
      font-size: 0.16rem;
      color: rgba(0, 0, 0, 0.8);
    }
    .subs {
      margin-top: 0.2rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .sub {
        width: 1.4rem;
        margin: 0.02rem;
        // flex: 1;
        cursor: pointer;
        .relationImg {
          margin-bottom: 0.1rem;
          width: 1rem;
          height: 1rem;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          margin: 10px;
        }
        .text {
          font-size: 0.18rem;
          letter-spacing: 1px;
          color: rgb(45, 115, 255);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          height: 2vw;
          // white-space: nowrap;
        }
      }
    }
    .hot-con {
      line-height: 0.4rem;
      .hot-num {
        margin-right: 0.1rem;
        width: 20px;
        height: 20px;
        &.active {
          background: #2d73ff;
          border-radius: 50%;
          color: #ffffff;
        }
      }
    }
    .hot-wrap {
      overflow: hidden;
      .hide-scroll {
        width: calc(100% + 17px + 0.2rem);
        overflow-y: scroll;
        max-height: 4.22rem;
      }
    }
    .hot-tit {
      font-size: 14px;
    }
  }
}
.page_box {
  box-sizing: border-box;
  margin: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
